<template lang="pug">
  .itemWrapper
    .mediaBox(@click.stop="()=> routerInfo()")
      img(v-if="detail.resType === 'image'" :src="detail.resURL")
      img(v-else :src="detail.cover")
      .btn-box
        img(src="@/assets/delete.png" @click.stop="delHandle(detail.id)")
    .detail
      h3 {{detail.title}}
      p
        i.mr5(class="el-icon-user")
        span {{detail.staffName}}
        span.ml16
          i.mr5(class="el-icon-time")
          | {{detail.created | dateFilter('YYYY/MM/DD')}}
</template>
<script>
import { docSubmit } from '../api'
export default {
  props: {
    detail: {
      type: Object,
      default: () => ({})
    },
    isMy: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    routerInfo () {
      console.log(this.detail.id)
      const path = this.$route.path
      if (path === '/educational/courseManage/source') {
        this.$router.push({
          path: '/educational/courseManage/source/info',
          query: {
            id: this.detail.id
          }
        })
      } else if (path === '/teacherResource/training/source') {
        this.$router.push({
          path: '/teacherResource/training/source/info',
          query: {
            id: this.detail.id
          }
        })
      }
    },
    delHandle (id) {
      this.$confirm('确认要删除该档案吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        docSubmit({ ids: id }, 'delete').then(() => {
          this.$message.success('删除成功')
          this.$emit('getList')
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.itemWrapper {
  position: relative;
  margin-bottom: 30px;
  cursor: pointer;

  .mediaBox {
    position: relative;
    height: 230px;
    background: #fafafa;

    >img {
      width: 100%;
      height: 100%;
    }

    >span {

      position: absolute;
      display: block;
      left: 50%;
      top: 50%;
      z-index: 10;
      transform: translate(-50%, -50%);
      text-align: center;

      i {
        font-size: 56px;
        color: #69b7df
      }
    }

    .btn-box {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }
  }

  .detail {
    border: 1px solid #EBEBEE;
    border-top: 0;
    padding: 16px 12px;

    h3 {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #000000;
      padding: 0;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 10px
    }

    p {
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
      line-height: 1.5;
    }

    span {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #77778C;
      font-style: normal;
      text-transform: none;
    }
  }

  footer {
    margin-top: 10px;

    .gradientBtn {
      height: 40px;
    }
  }
}

.tag {
  position: absolute;
  z-index: 10;
  top: 10px;
  left: -10px;
  height: 30px;
  display: inline-block;
  padding: 0 24px;
  line-height: 30px;
  border-top-left-radius: 15px;
  border-bottom-right-radius: 15px;
  color: #fff;
  font-size: 13px;
  font-family: PingFang SC;
}
</style>
